<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>瀑布流</title>
    <style>
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      .content {
        width: 1000px;
        margin: 0 auto;
        position: relative;
      }

      .content > div {
        position: absolute;
        width: 200px;
        display: block;
        border: 1px solid #ccc;
        padding: 10px;
      }

      .content > div > img {
        width: 100%;
      }
    </style>
  </head>

  <body>
    <div class="content"></div>
  </body>
  <script src="./data.js"></script>
  <script>
    // 获取容器标签
    let content = document.querySelector(".content");
    // 获取容器标签的宽度
    let contentWidth = content.scrollWidth;
    // 定义每个图片的宽度
    let imgWidth = 200;
    // 计算出我们每一排可以放置多少个
    let cols = Math.floor(contentWidth / imgWidth);
    // 生成一个数组，用于记录每一列的高度，初始高度均为 0
    let arrHeight = new Array(cols).fill(0);

    function appendImgItems(srcList) {
      srcList.forEach((item, index) => {
        let div = document.createElement("div");
        let img = document.createElement("img");
        img.src = srcList[index];
        // 等图片加载完成
        img.onload = function () {
          // 获得数组内记录高度的最小值及对应的索引值
          let minHeight = Math.min(...arrHeight);
          let i = arrHeight.indexOf(minHeight);
          // 结合列宽计算定位 left
          div.style.left = imgWidth * i + "px";
          // top 值直接使用数组中的高度最小值
          div.style.top = minHeight + "px";
          // 将图片添加到页面中
          div.appendChild(img);
          content.appendChild(div);

          // 更新数组内高度（只能在标签显示在页面上之后才能获取 div 高度）
          arrHeight[i] += div.offsetHeight;
          // 获取数组中新的最高值，更新容器高度
          let maxHeight = Math.max(...arrHeight);
          content.style.height = maxHeight + "px";
        };
      });
    }
    appendImgItems(srcList);
  </script>
</html>
